<!-- 签名 -->
<template>
  <view>
    <van-field
      v-show="!props.hidden"
      v-model="_value"
      :name="props.formItem?.id"
      :label="props.formItem?.title"
      :placeholder="props.placeholder"
      :rules="rules"
      :required="props.required"
      :readonly="true"
      :input-align="FieldInputAlign.DEFAULT"
      clearable
      is-link
      @click="to_sign()"
    >
      <template #input>
        <van-image v-if="isNotEmpty(_value)" width="50" height="50" :src="_value" />
      </template>
    </van-field>

    <van-popup v-model:show="showSign" position="bottom" round>
      <view>
        <van-image
          v-if="isNotEmpty(_value) && !drawReset"
          width="100%"
          height="100%"
          :src="_value"
        />
        <van-signature
          ref="signRef"
          v-else
          :pen-color="props.color"
          :line-width="props.thickness"
          @submit="onSubmit"
          @clear="onClear"
        />

        <view class="draw-button" v-if="isNotEmpty(_value) && !drawReset">
          <van-button
            type="default"
            size="small"
            class="draw-button__margin"
            @click="showSign = false"
          >
            取消
          </van-button>
          <van-button
            type="primary"
            size="small"
            class="draw-button__margin"
            @click="drawCanvas(true)"
          >
            重绘
          </van-button>
        </view>
      </view>
    </van-popup>
  </view>
</template>
<script setup lang="ts">
  import { isEmpty, isNotEmpty } from '@/utils/is';
  import { computed, ref, watch } from 'vue';
  import { evalFormual } from '@/utils/evalFormual';
  import { Toast } from '@/utils/uniapi/prompt';
  import { FieldInputAlign } from '@/enums/formEnum';
  import type { SignatureInstance } from 'vant';

  const emits = defineEmits(['update:value', 'labelShow']);

  const props = defineProps({
    value: {
      type: String,
      default: () => '',
    },
    required: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    //隐藏组件的公共属性
    formula: {
      type: Object,
      default: () => {
        return {
          showFormula: '', //回显用，因为包含表单字段的时候会出现表单名称
          calcFormula: '', //解析用，表单名称对应为formData.fieldxxxx
        };
      },
    },
    formItem: {
      type: Object,
      default: () => {},
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    rule: {
      type: Object,
      default: () => null,
    },
    placeholder: {
      type: String,
      default: '请输入内容',
    },
    enableScan: {
      type: Boolean,
      default: false,
    },
    hidden: {
      type: Boolean,
      default: false,
    },
    // 签名颜色
    color: {
      type: String,
      default: () => '#333',
    },
    // 签名壁画粗细
    thickness: {
      type: Number,
      default: () => 2,
    },
  });

  /** 计算属性：_value */
  const _value = computed({
    get() {
      return props.value;
    },
    set(val) {
      emits('update:value', val);
    },
  });

  /** 校验规则 */
  const rules = computed(() => {
    if (isEmpty(props.rule)) {
      return [];
    } else {
      return props.rule;
    }
  });

  const doFormula = () => {
    let hidden = evalFormual(props.formula.calcFormula, props.formData);
    //如果隐藏，同时也隐藏label,通知父组件去隐藏，因为label不在当前界面
    //调用父组件FormDesignRender 的方法：
    emits('labelShow', props.formItem, hidden);
  };

  watch(
    () => props.formData,
    () => {
      doFormula();
    },
    { immediate: true, deep: true },
  );

  const signRef = ref<SignatureInstance>();

  const showSign = ref(false);
  const drawReset = ref(false);

  const onSubmit = (data: any) => {
    console.log(data);
    _value.value = data.image;
    showSign.value = false;
  };
  const onClear = () => Toast('clear');

  const to_sign = () => {
    showSign.value = true;
    drawCanvas(false);
  };

  const drawCanvas = (type: boolean) => {
    drawReset.value = type;
    setTimeout(() => {
      console.log(signRef.value);
      const e = signRef.value?.$el;
      const content = e.childNodes[0];
      const canvas = e.childNodes[0].childNodes[0];
      canvas.width = content.clientWidth;
      canvas.height = content.clientHeight;
    }, 1000);
  };
</script>
<style scoped lang="scss">
  .draw-button {
    display: flex;
    justify-content: flex-end;

    &__margin {
      margin: 10rpx !important;
    }
  }
</style>
